<template>
  <div class="merchant">
    <div class="merchant_list">
      <!--表头按钮 搜索 新增 -->
      <!--搜索 商户id编号  商户名称  状态 -->
      <div class="filter-container">
        <el-input v-model="listQuery.id"
                  placeholder="商户ID编号" style="width: 100px; margin-left: 50px"
                  class="filter-item"
                  @keyup.enter.native="handleFilter"/>
        <el-input v-model="listQuery.name"
                  placeholder="商户名称" style="width: 100px;"
                  class="filter-item"
                  @keyup.enter.native="handleFilter"/>
        <el-select v-model="listQuery.status"
                   placeholder="商户状态"
                   clearable class="filter-item"
                   style="width: 130px">
          <el-option
            v-for="item in calendarTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"/>
        </el-select>
        <el-button v-waves
                   class="filter-item"
                   type="primary"
                   style="margin-left: 50px;"
                   icon="el-icon-search"
                   @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button class="filter-item"
                   type="primary"
                   icon="el-icon-edit"
                   @click="handleCreate">
          新增商户
        </el-button>
        <el-button v-waves
                   :loading="downloadLoading"
                   class="filter-item"
                   type="primary"
                   icon="el-icon-download"
                   @click="handleDownload">
          导出
        </el-button>

        <el-button v-waves
                   :loading="downloadLoading"
                   class="filter-item"
                   type="primary"
                   icon="el-icon-upload2"
                   @click="handleDownload">
          导入
        </el-button>
      </div>
      <!--商户管理列表+操作按钮-->
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80"
                         :class-name="getSortClass('id')">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户图片"
                         prop="pic"
                         sortable="custom"
                         align="center"
                         width="140">
          <template slot-scope="scope">
            <img width="100" :src="scope.row.p1">
          </template>
        </el-table-column>
        <el-table-column label="商户名称"
                         prop="name"
                         sortable="custom"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户地址"
                         prop="address"
                         sortable="custom"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户状态"
                         prop="status"
                         sortable="custom"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.statusName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button
              v-if="row.status!='deleted'"
              size="mini" type="danger"
              @click="handleDel(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table>
    </div>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import ajax from '@/utils/baseurl'
  import Pagination from '@/components/Pagination'
  import VueUeditorWrap from 'vue-ueditor-wrap'

  const calendarTypeOptions = [
    { key: '1', display_name: '正在营业' },
    { key: '2', display_name: '已经打烊' },
    { key: '3', display_name: '店家休息' },
    { key: '4', display_name: '店铺维修' }
  ]

  var p
  export default {
    name: 'merchantManagement',
    directives: { waves },
    components: { Pagination, VueUeditorWrap },
    data() {
      return {
        temp: {
          id: '',
          name: '',
          p1: '',
          address: '',
          statusName: ''
        },
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: false,
        downloadLoading: false,
        calendarTypeOptions,
        listQuery: {
          page: 1,
          limit: 10,
          id: '',
          name: '',
          status:''
        },
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 240,
          // 初始容量宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址我为了方便各位体验文件上传）
          serverUrl: 'http://localhost:8080/upload',
          UEDITOR_HOME_URL: '/UEditor/'
        }
      }
    },
    created() {
      p = this
      p.getList()
    },
    methods: {
      getList() {
        p.listLoading = true
        ajax('merchant/getPage', this.listQuery, function(res) {
          console.log(res)
          res = JSON.parse(res)
          p.list = res.page.list
          //page limit赋值
          p.total = parseInt(res.page.totalCount)
          p.listLoading = false
        })
      },
      handleDel(){

      },
      handleUpdate(){

      },
      handleFilter() {
        p.listQuery.page = 1
        p.getList()
      },
      handleCreate(){

      },
      handleDownload() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
          const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
          const data = this.formatJson(filterVal, this.list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'table-list'
          })
          this.downloadLoading = false
        })
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      getSortClass: function(key) {
        const sort = this.listQuery.sort
        return sort === `+${key}`
          ? 'ascending'
          : sort === `-${key}`
            ? 'descending'
            : ''
      }

    }
  }
</script>
